<template>
    <div class="CustomerList">
        <!-- 客户列表头部 -->
        <div class="publicHeader customerListHeader">
            <div class="rowBox">
                <div class="tit">客户列表</div>
            </div>
            <div class="typeToggle" v-if="isManager">
                <input v-model="getCusAttr.isShowAll" type="checkbox" @change="showAllCus" />显示所有客户
            </div>
        </div>
        <!-- 客户列表主体 -->
        <div setScroll="select" v-infinite-scroll="getNextCus" class="customerListView">
            <!-- 左侧客户列表 -->
            <ul class="customer_list" >
                <li v-if="isManager" class="customer_item" :class="{active:activeIndex == -1}" @click="selectCus(-1)">
                    查看全部
                </li>
                <!-- 客户 -->
                <li class="customer_item" v-for="cus,index in cusList" :key="cus.customers_id * 2 + index" :class="{active:activeIndex == index}" @click="selectCus(index)">
                    <div class="cus_info clearFloat">
                        <div class="cus_uid">{{cus.cus_uid}}</div>
                        <div class="cus_name">{{cus.cus_name}}</div>
                    </div>
                    
                    <div class="cus_money">
                        <div v-if="showType == 1">
                            未结束报价项目数:<span>{{cus.cus_quocount?cus.cus_quocount:0}}</span>
                        </div>
                        <div v-if="showType == 2">
                            未做合同项目数:<span>{{cus.cus_ordercount?cus.cus_ordercount:0}}</span>
                        </div>
                        <div v-if="showType == 3">
                            未对账项目数:<span>{{cus.cus_reccount?cus.cus_reccosunt:0}}</span>
                        </div>
                        <div v-if="showType == 4">
                            未开票项目数:<span>{{cus.cus_invoicecount?cus.cus_invoicecount:0}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {customerApi} from "@/api"
export default {
    props:{
        // 当前显示的客户数据
        showType:{
            default:1
        },
        // 排序方式
        orderBy:String,
        // 搜索关键字
        searchValue:String
    },
    created(){
        this.getCustomerList();
    },
    data(){
        return {
            // 获取客户列表的参数
            getCusAttr:{
                isShowAll:false,
                page:0
            },
            cusList:[],
            // 当前选中的客户索引
            activeIndex:-1
        }
    },

    methods:{
        async getCustomerList(){
            var data = {
                role:this.getCusAttr.isShowAll?"mgr":"self",
                page:this.getCusAttr.page,
                orderBy:this.orderBy
            }
            // 获取客户列表
           var result = await customerApi.getCustomerList(data);
           var cusList = result.data;
           if(!cusList || cusList.length == 0){
               this.getCusAttr.page--;
           }
            if(data.page){
                if(!cusList || cusList.length == 0){
                    this.$message.warning("没有更多数据了~");
                }
                this.cusList = this.cusList.concat(cusList);
            }else{
                this.cusList = cusList;
            }
            this.selectCus(-1);
        },
        selectCus(index){
            this.activeIndex = index;
            if(index === -1){
                this.$emit("selectCus",{customers_id:0});
            }else{
                this.$emit("selectCus",this.cusList[index]);
            }
        },
        showAllCus(){
            this.getCusAttr.page = 0;
            this.activeIndex = -1;
            this.selectCus(-1);
            this.getCustomerList();
        },
        getNextCus(){
            this.getCusAttr.page++;
            this.getCustomerList();
        }
    },
    computed:{
        isManager(){
            return this.$store.state.userPer.administrator || this.$store.state.userPer.customerManager
        }
    }
}
</script>

<style lang="less" scoped>
.CustomerList {
    position: relative;
    height: 100%;
    width: 300px;
    // background: #f7f7f7;
    overflow: auto;
    color: #444444;
    .customerListHeader {
        background:#3b3e44;
        height: 40px;
        line-height: 40px;
        padding: 0px 10px;
        .rowBox{
            float: left;
            .tit{
                font-size: 18px;
                color: #ffffff;
            }
        }
        .typeToggle{
            color: #fff;
            float: right;
            input{
                vertical-align: middle;
                margin: 0;
            }
        }
    }

    .customerListView {
        // 左侧订单列表
        position: absolute;
        display: inline-block;
        left: 0;
        right: 0px;
        top: 40px;
        bottom: 0;
        // background: rgb(250, 250, 250);
        padding: 0px;
        overflow: auto;
        .customer_list {

            // 订单
            .customer_item {
                border-bottom: 1px solid #d2dae2;
                // background: #f5f6fa;
                padding: 10px 20px;
                cursor: pointer;
                position: relative;
                &:hover {
                    background: #dcdde1;
                }

                // 订单选中样式
                &.active {
                    background: #2d2e36;
                    color: #dcdde1;
                }

                .cus_info{
                    font-size: 16px;
                    >div{
                        float: left;
                        &.cus_name{
                            margin-left: 10px;
                            width: 178px;
                        }
                    }
                }

                // 客户名字
                // .cus_name{
                //     font-size: 18px;
                //     div{
                //         height: 25px;
                //         line-height: 25px;
                //     }
                // }

                .cus_money{
                    margin-top: 10px;
                    div{
                        font-size: 16px;
                        height: 25px;
                        line-height: 25px;
                        text-align: right;
                        .cus_quotation{
                            color: dodgerblue;
                            font-weight: bold;
                            &.isMinus{
                                color: red;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>